<template>
    <div class="stat_previre-form">
        <ControlCard
            class="previre-form"
            :control-card-columns="props.controlCardColumns"
            :cover-image="props.coverImage"
            :activity-data="props.activityData"
            :read-only="readOnly" />
    </div>
</template>
<script lang="tsx" setup>
import { defineProps, provide, reactive, ref, computed, defineExpose } from 'vue';
import ControlCard from './ControlCard';

const props = defineProps(['controlCardColumns', 'coverImage', 'readOnly', 'activityData']);

const formDataModel = computed(() => {
    const data = {};
    for (const iterator of props.controlCardColumns) {
        if (iterator.type === 'muti_select' || iterator.type === 'picture') {
            // 多选\图片
            data[iterator.key] = Array.isArray(iterator.form_value) ? iterator.form_value : [iterator.form_value];
        } else {
            data[iterator.key] = iterator.form_value;
        }
    }
    return data;
});

// console.log(formDataModel)
const isSubmit = ref<boolean>(false);
const setState = (val = false) => {
    isSubmit.value = val;
};
provide('formDataModel', formDataModel);
provide('setState', setState);
defineExpose({
    setState
});
</script>

<style lang="scss" scoped>
@mixin card {
    box-sizing: border-box;
    width: 414px;
    background-color: #fff;
    box-shadow: 0 12px 48px 16px rgb(0 0 0 / 3%);
}

.previre-form {
    @include card;

    padding-bottom: 60px;
}

.control_tip {
    text-align: center;
    margin-bottom: 16px;
    color: #969696;
    font-size: 12px;
}

.preview-phone {
    @include card;

    border-radius: 20px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 0 120px;

    img {
        width: 280px;
        height: 280px;
    }

    .submit_tip {
        margin-bottom: 20px;
        color: #666;

        > i {
            vertical-align: bottom;
            margin-right: 4px;
        }
    }

    .tip {
        margin-top: 12px;
        font-size: 14px;
        color: #ccc;
    }
}

.stat_previre-form {
    position: relative;
}
</style>
